<template>
  <div class="home">
    <!-- 左边导航区域 -->
    <div class="hLeft">
      <div>
        <div class="small-header">主页</div>
        <div class="small-content">
          <router-link to="/firstPage">
            <div>
              <a
                href="#"
                class="gezi gezi2 el-icon-eleme"
                style="display: block; color: orange"
                >首页</a
              >
            </div>
          </router-link>
          <el-collapse>
            <el-collapse-item title="商品" name="1">
              <div class="gezi">
                <router-link
                  to="/pinleiguanli"
                  style="display: block; width: 100%; height: 100%"
                >
                  <span style="color: white">品类管理</span>
                </router-link>
              </div>
              <router-link
                to="/goods"
                style="display: block; width: 100%; height: 100%"
              >
                <div class="gezi">商品管理</div>
              </router-link>
              <router-link
                to="/specAttr"
                style="display: block; width: 100%; height: 100%"
              >
                <div class="gezi">规格属性</div>
              </router-link>
              
            </el-collapse-item>
            <el-collapse-item title="用户" name="2">
              <router-link
                to="/user"
                style="display: block; width: 100%; height: 100%"
              >
                <div class="gezi">用户管理</div>
              </router-link>
              <router-link
                to="/power"
                style="display: block; width: 100%; height: 100%"
              >
                <div class="gezi">权限管理</div>
              </router-link>
            </el-collapse-item>
            
            <el-collapse-item title="订单" name="3">
              <router-link
                to="/order"
                style="display: block; width: 100%; height: 100%"
              >
                <div class="gezi">订单管理</div>
              </router-link>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    <!-- 右边内容区域 -->
    <div class="hContent">
      <div class="home-header">
        <div class="home-header-msg">
          <div>
            <img
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              alt=""
            />
            <span> {{ this.data.username }} </span>
          </div>
          <div class="buxiaode">|</div>
          <div>
            <router-link to="/" style="color: orange"> 退出登录 </router-link>
          </div>
        </div>
      </div>
      <!-- 动态组件位置 -->
      <div class="home-middle">
        <div class="smallBox">
          <router-view></router-view>
        </div>
      </div>
      <div class="home-footer">Created By Fiora At 2019.07</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import router from "../router/index"
import { mapState } from "vuex";

export default {
  data() {
    return {
      // SGReq: {
      //   parentId: '5f806c0908fb4937958b7eea',
      //   pageNum: 1,
      //   pageSize: 5,
      // }
    };
  },
  components: {},
  methods: {
    // ...mapActions(["getSDate"]),
    // handleSG() {
    //   // console.log(this.SGReq)
    //   this.getSDate(this.SGReq)
    //   // .then((a) => {
    //     // console.log(a)
    //   // })
    // },
  },
  computed: {
    ...mapState({
      data: (state) => state.login.userInfo,
    }),
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/index.css";
@import "../assets/home.css";
</style>